<template>
	<view class="container" style="background: url('https://qiniu.dadaozhixing.top/dxx/pages/login/page_login_header.png') no-repeat;background-size: 750upx 472upx;;">
		<view style="height: 408upx;"></view>
		<div class="navigator-back" @click="navigatBack"><uni-icons type="left" size="30" color="white"></uni-icons></div>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			
			<view class="input-content">
				<view class="input-item">
					<input 
						type="number" 
						:value="mobile" 
						placeholder="请输入手机号"
						maxlength="11"
						data-key="mobile"
						@input="inputChange"
					/>
				</view>
				<view class="input-item">
					<input 
						type="password" 
						value="" 
						placeholder="请输入验证码"
						placeholder-class="input-empty"
						maxlength="6"
						password 
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
					<view class="get-vc-btn">
						<span :class="timeOutLeft==0?'':'sms-sending'"
						 :disabled="timeOutLeft != 0"
						 @click="sendVerifyCode">{{smsInfo}}</span>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
		</view>
		
	</view>
</template>

<script>
	import {  
        mapMutations  
    } from 'vuex';
	import {loginByCodeApi,sendVerifyCodeApi} from '@/api/user.js'
	import {isStringEmpty,isMobileLegal} from '@/utils/stringutils.js'
	
	export default{
		data(){
			return {
				mobile: '',
				password: '',
				logining: false,
				isGetingVerifyCode: false,
				timerId: '',
				timeInterval: 60,
				timeOutLeft: 0,
				firstSend: true,
				smsTxt: ["获取验证码","正在发送","重新获取"]
			}
		},
		onLoad(){
			
		},
		computed: {
			smsInfo() {
				let canGetText = this.firstSend?this.smsTxt[0]:this.smsTxt[2]
				return this.timeOutLeft == 0? canGetText: this.smsTxt[1] + this.timeOutLeft + "s"
			}
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack(){
				uni.navigateBack();
			},
			async sendVerifyCode(){
				let that = this
				if(isMobileLegal(this.mobile)) {
					let ret = await sendVerifyCodeApi({"mobile": this.mobile})
					console.log(ret)
					this.timeOutLeft = this.timeInterval
					this.firstSend = false
					this.timerId = setInterval(()=>{
						that.timeOutLeft -= 1
						if (that.timeOutLeft <= 0) {
							clearInterval(that.timerId)
						}
					},1000)
				}else {
					this.$api.msg('请输入正确手机号');
				}
			},
			async toLogin(){
				const {mobile, password} = this;
				
				const sendData = {
					mobile,
					password
				};
				if(isStringEmpty(mobile)) {
					return this.$api.msg('手机号不能为空');
				}
				if(isStringEmpty(password)) {
					return this.$api.msg('验证码不能为空');
				}
				this.logining = true;
				
				const result = await loginByCodeApi({mobile,"code": password});
				console.log("login result = ",result)
				if(result != undefined && result.code==200){
					this.login(result.data)
                    this.navigatBack() 
				}else{
					this.logining = false;
					
				}
			},
			navigatBack() {
				let pages = getCurrentPages()
				console.log(pages);
				uni.navigateBack({
					success() {
						console.log("navigate back success");
					},
					fail(err) {
						console.log(JSON.stringify(err));
						uni.switchTab({
							url:"/pages/index/index"
						})
					}
				})
			}
		},

	}
</script>

<style lang='scss'>
	
	.container{
		position: relative;
		.navigator-back{
			position: absolute;
			top: 118upx;
			left: 24upx;
		}
	}
	.wrapper{
		border-radius: 64upx;
		background-color: #fff;
		padding-top: 96upx;
	}
	
	
	
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display: flex;
		align-items: center;
		input{
			height: 106upx;
			line-height: 42rpx;
			font-size: 28upx;
			color: #23242E;
			width: 100%;
		}
		.get-vc-btn{
			line-height: 106upx;
			width: 270rpx;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #3EB3F3;
			line-height: 42rpx;
			text-align: right;
			font-style: normal;
			.sms-sending{
				color: #C8C9CC;
			}
		}
	}

	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 60upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;
		text{
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
